<script lang="ts" setup>
import { ElStatistic } from 'element-plus'
import { useTransition } from '@vueuse/core'
import { watch, h, ref } from 'vue'
import { vw } from '../utils'

const props = withDefaults(
  defineProps<{
    total?: string | number
  }>(),
  {
    total: 0,
  },
)

const source = ref(Number(props.total ?? 0))
const outputValue = useTransition(source, {
  duration: 1000,
})

watch(
  () => props.total,
  (newVal) => {
    source.value = Number(newVal ?? 0)
  },
  {
    deep: true,
  },
)
</script>

<template>
  <component
    :is="
      h(
        ElStatistic,
        {
          ...$attrs,
          value: outputValue,
          valueStyle: {
            fontSize: vw(28),
            fontWeight: '700',
            color: '#fff',
          },
        },
        $slots,
      )
    "
  ></component>
</template>
